<template>
  <div class="home">
    <div class="search" @click="goSearch">
      <div class="search-input">
        <span class="iconfont icon-search"></span>
        <p class="search-input__plh">搜索课程名称</p>
      </div>
    </div>
    <div class="swiper-box">
      <van-swipe :autoplay="3000" :height="260">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image">
        </van-swipe-item>
      </van-swipe>
    </div>
    <home-icon-menu/>
    <section class="content">
      <component
        v-for="(item,index) in homeList"
        :key="index"
        :is="item.compnentName"
        :list="item.data"
        :title="item.title"
        :num-unit="item.numUnit"
        :url="{name: 'moreboom', query: {type: item.type}}"
        @link-to="linkTo"
      ></component>
    </section>

    <!--    <van-popup class="pop" v-model="show" >-->
    <!--      <img class="popclose" src="./../../assets/img/popclose.png" alt="" @click="popclose">-->
    <!--      <p class="discountprice">{{c_price}}元</p>-->
    <!--      <p class="discounttime">有效期截止至{{c_time}}</p>-->
    <!--      <img src="./../../assets/img/indexpopbtn.png" alt="" @click="getdiscount(c_id)">-->
    <!--      <p class="discounttest">此券为测试券,领取无效</p>-->
    <!--    </van-popup>-->
  </div>
</template>

<script>
  import DiscountList from './../MyDiscount/components/DiscountList'
  import Vue from 'vue'
  import HomeIconMenu from './components/HomeIconMenu'
  import HomeItemOne from './components/HomeItemOne'
  import HomeItemOneBig from './components/HomeItemOneBig'
  import HomeItemTwo from './components/HomeItemTwo'
  import Tabbar from '@/components/Tabbar'
  import { recommendList, startTeachers, freeZone, homeList } from '@/api/static'
  import {
    getBannerList,
    getHomeList,
    getHomeCoupon,
    getCoupon,
  } from '@/api/fetch'
  import { homeLinkTo as linkTo } from '~js/common.js'

  import { Popup } from 'vant'
  import { Toast } from 'vant'

  Vue.use(Toast)
  Vue.use(Popup)

  export default {
    name: 'Home',
    components: {
      HomeIconMenu,
      HomeItemOne,
      HomeItemOneBig,
      HomeItemTwo,
      Tabbar,
      DiscountList,
    },
    data() {
      return {
        // 首页推荐优惠券
        c_id: '',
        c_price: '',
        c_time: '',

        componentList: ['home-item-one', 'home-item-two', 'home-item-one-big'],
        componentListUnit: ['人开通', '人开通', '人开通', '人开通'],
        searchKey: '',
        show: false,
        images: [],
        collectionllist: [],
        recommendList,
        startTeachers,
        freeZone,
        homeList,
      }
    },
    computed: {
      currentComponent() {
        return 'home-item-one'
      },
    },
    created() {
      this.fetchBanner()
      this.fetchGoodsList()
      this.getHomeCoupon()
    },
    mounted() {
      this.show = true
      // this.fetchMockData()
      this.fetchHomeList()
    },
    methods: {
      popclose() {
        this.show = false
      },
      getdiscount(e) {
        let that = this
        that.getCoupon(e)
        Toast.success('领取成功')
        setTimeout(function() {
          that.show = false
        }, 1000)
      },

      fetchMockData() {
        homeList.map((item, index) => {
          item['compnentName'] = this.componentList[item['layout_type']]
          item['numUnit'] = this.componentListUnit[item['layout_type']]
          item.data.map(item2 => {
            item2['id'] = item2['vid']
            item2['title'] = item2['title']
            item2['imgUrl'] = item2['picture']
            item2['desc'] = item2['detail']
            item2['price_discounts'] = item2['market_price']
            item2['price_original'] = item2['shop_price']
            item2['num'] = item2['open']
            item2['type'] = item2['price_type']
          })
        })
      },

      async fetchHomeList() {
        const d = await getHomeList()
        if (d.errcode == 0) {
          d.data.map((item, idx) => {
            item['compnentName'] = this.componentList[item['layout_type']]
            item['numUnit'] = this.componentListUnit[item['layout_type']]
            item.data.map(item2 => {
              item2['id'] = item2['id']
              item2['title'] = item2['title']
              item2['imgUrl'] = item2['picture']
              item2['desc'] = item2['detail']
              item2['price_discounts'] = item2['market_price']
              item2['price_original'] = item2['shop_price']
              item2['num'] = item2['open']
              item2['type'] = item2['price_type']
            })
          })
          this.homeList = d.data
        }
      },

      goSearch() {
        this.$router.push({ name: 'search' })
      },

      async getHomeCoupon() {
        const res = await getHomeCoupon()
        if (res.errcode == 0 && res.data) {
          this.c_id = res.data.c_id
          this.c_time = res.data.c_endtime
          this.c_price = res.data.c_shop_price
        }
      },

      async getCoupon(e) {
        const res = await getCoupon({
          c_id: e,
        })
      },

      async fetchBanner() {
        const res = await getBannerList()
        if (res.errcode === 0) {
          this.images = []
          res.data.forEach(item => {
            this.images.push(item.url)
          })
        }
      },
      async fetchGoodsList() {
        const res = await getHomeList()
        if (res.errcode === 0) {
        }
      },
      linkTo(obj) {
       let routeName = linkTo(obj.type)
        this.$router.push({
          name: routeName,
          query: {
            vid: obj.vid,
          },
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  @import '~less/variable.less';
  @import '~less/mixins.less';
  .pop {
    width: 300px;
    height: 400px;
    background: url('./../../assets/img/indexpop.png') center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    text-align: center;
    .popclose {
      width: 30px;
      height: 30px;
      float: right;
      margin-top: 0;
      z-index: 9999;
    }
    p {
      width: 100%;
      color: #fc575a;
      font-weight: bold;
    }
    .discountprice {
      margin-top: 100px;
      font-size: 40px;
    }
    .discounttime {
      margin-top: 60px;
      font-size: 12px;
    }
    img {
      width: 160px;
      height: 40px;
      margin-top: 60px;
    }
    .discounttest {
      color: white;
      font-size: 12px;
      font-weight: 400;
      margin-top: 5px;
    }
  }
  .home /deep/ .van-search {
    display: flex;
    align-items: center;
  }
  .home /deep/ .van-swipe-item {
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .home {
    .h100();
    background-color: #f5efef;
    .search {
      height: 30px;
      padding: 10px 15px;
      &-input {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 5px 10px;
        color: @font-second;
        background: #fff;
        cursor: pointer;
        border-radius: 5px;
        .icon-search {
          display: inline-block;
          width: 22px;
          height: 22px;
          background: url('./../../assets/img/icon-search.png') center center
            no-repeat;
          background-size: 18px;
        }
        &__plh {
          display: inline-block;
          margin-left: 6px;
        }
      }
    }
    .content {
      box-sizing: border-box;
      padding: 1px 15px;
      padding-bottom: 0;
      background-color: #fff;
    }
  }
</style>
